<template>

  <el-dialog
      title="客户价卡添加"
      :visible.sync="dialogTableVisible"
      width="900px"
  >

    <el-form labelWidth="120px" label-position="left" style="padding-top: 20px;" ref="refForm">

      <el-row>
        <el-col>
          <el-form-item label="客户" label-position="top">
            <el-input type="textarea" style="margin-bottom: 10px; " v-model="customerCodes" rows="5"
                      placeholder="请输入客户编码， 以`换行`或`逗号`分隔"
            ></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col>
          <el-form-item :label="$tt('label_logistics', '物流产品')" prop="productId">
            <ex_super_input :value="formValue.productId" class="w_fill" :items="products" :attrs="{
            option: (e)=>({ label: $formatNameCode(e.productName, e.productCode), value: e['id'] }),
          }" type="select" @changeItem="productChange"/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="价卡">
            <ex_super_input class="w_fill" v-model="formValue.versionId" type="select"
                            :items="transferVersion"
                            :attrs="{
                option: { label: 'versionName' , value: 'id' },
              } " @changeItem="versionchange"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item :label="$tt('有效期')">

            <div style="display: flex; align-items: center; gap: 4px;">
              <el-date-picker
                  class="no-clear-input-text"
                  v-model="formValue.customerVersionPriceStartTime"
                  type="date"
                  placeholder="开始日期"
                  :clearable="false"
                  value-format="timestamp"
              >
              </el-date-picker>

              <span style="color: #606266;">至</span>
              <el-date-picker
                  class="no-clear-input-text"
                  v-model="formValue.customerVersionPriceEndTime"
                  type="date"
                  placeholder="开始日期"
                  :clearable="false"
                  value-format="timestamp"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon" @click="dialogTableVisible = false"> 取消</el-button>
      <el-button type="primary" @click="batchInsertCustomerCodes">添加</el-button>
    </div>
  </el-dialog>

</template>

<script>

export default {
  name: 'warehouse_select',
  data() {
    return {

      products: [],
      transferVersion: [],
      dialogTableVisible: false,

      formValue: {
        "productId": "",
        "versionId": "",
        "versionName": "",
        "customerId": "",
        "customerCode": "",
        "customerName": "",
        "customerVersionPriceStartTime": '',
        "customerVersionPriceEndTime": '',
      },

      rightQuery: '',
      queryUrl: '',
      needChange: false,
      productName: '',
      customerCodes: '',
      showBatchInsertCustomer: false
    }
  },

  watch: {
    'formValue.productId'(val, old) {
      if (val !== '' && val != old) {
        this.$ajax({
          url: '/fms-api/product/PmsTransportPriceRpc/getVersionInfoByProductId.json',
          data: {
            productId: val
          },
          success: (res) => {
            if (res && res.data && res.data.rows) {
              this.transferVersion = res.data.rows
            }
          },
        })
      }
    },
    'dialogTableVisible'(val, old) {
      // 重置数据，清空数据
      if (val === false) {
        this.formValue = {
          "productId": "",
          "versionId": "",
          "versionName": "",
          "customerId": "",
          "customerCode": "",
          "customerName": "",
          "customerVersionPriceStartTime": '',
          "customerVersionPriceEndTime": '',
        }
      }
    }
  },


  props: {},

  created() {

    let _this = this
    _this.initTransferProduct()

  },

  mounted() {

  },

  methods: {
    show() {
      this.dialogTableVisible = true
    },
    initTransferProduct() {

      this.loading = true
      this.$ajax({
        url: '/fms-api/product/PmsTransportProductRpc/selectSimpleAll.json',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          if (res && res.data && res.data.rows) {
            this.products = res.data.rows
          }
        },
      })
    },
    versionchange(e) {
      if (e) {
        this.formValue.versionId = e.id
        this.formValue.versionName = e.versionName
      } else {
        this.formValue.versionId = null
        this.formValue.versionName = null
      }
    },
    productChange(e) {
      if (e) {
        this.formValue.productId = e.id
        this.formValue.productName = e.productName
        this.formValue.productCode = e.productCode
      } else {
        this.formValue.productId = null
        this.formValue.productName = null
        this.formValue.productCode = null
      }
    },
    batchInsertCustomerCodes() {
      let _this = this

      if (_this.formValue.customerVersionPriceStartTime && _this.formValue.customerVersionPriceEndTime) {
        if (_this.formValue.customerVersionPriceStartTime >= _this.formValue.customerVersionPriceEndTime) {
          _this.$message.warning(_this.$tt("label_pms_effective_time_setting_warning_tip"))
          return
        }
      }

      _this.formValue.status = 'ENABLE';

      _this.$ajax({
        url: '/fms-api/product/PmsTransportProductPermissionRpc/batchSaveUpdate.json',
        data: {
          'customerCodes': _this.customerCodes,
          'json': JSON.stringify(_this.formValue)
        },
        success: function (res) {
          _this.$message({
            "type": "success",
            "message": "添加成功"
          })

          _this.customerCodes = ''
          _this.dialogTableVisible = false
          // _this.showBatchInsertCustomer = false

        }
      })

    },

  },


}
</script>
